<html>

<head>
    <script src='/jquery-3.1.1.min.js'></script>
    <script>
        function transfer(from, to, amount) {
            $('#trans_log').html("Transfering");
            $.getJSON("/move/" + from + "-" + to + "-" + amount, function(result) {
                $('#trans_log').html("Transfer result: " + result.result);
                console.log(result);
            });
        }

        function query(id) {
            $('#amt').html("Querying...");
            $.getJSON("/query/" + id, function(result) {
                $('#amt').html("Total amount: " + result.amount);
                console.log(result.amount);
            });
        }

        function makeAsset(id, amount) {
            $('#asset_log').html("Making asset");
            $.getJSON("/assets/" + id + "-" + amount, function(result) {
                $('#asset_log').html("Make asset result: " + (result ? result.result : "no response"));
            });
        }
    </script>
</head>

<body>
    from: <input id="from" type="text" value="kaka1" />
    <a href='javascript:' onclick='query($("#from").val())'> query amount</a>
    <span id="amt" style="color:maroon"></span><br/>
    <br/>
    <br/> to: <input id="to" type="text" value="kaka3" />
    <a href='javascript:' onclick='makeAsset($("#to").val(),$("#amount").val())'> make asset</a>
    <span id="asset_log" style="color:blue"></span>
    <br/>
    <span style="color:blue;border-width:1px;border-style:dotted;">MAKE ASSET: account-name=[to], amount=[amount]</span>
    <br/>
    <br/> trans amount: <input id="amount" type="text" value="5" />
    <a href='javascript:' onclick='transfer($("#from").val(),$("#to").val(),$("#amount").val())'>transfer</a>
    <span id="trans_log" style="color:green"></span>
    <br/>
    <span style="color:green;border-width:1px;border-style:dotted;">TRANSFER ASSET: from=[from], to=[to], amount=[amount]</span>
    <br/>
    <span style="color:red">(it will take some time cause we have only 3 peers to calculate blocks)</span>

    <br/>
</body>

</html>